<template>
  <div class="announcement-management">
    <!-- 公告管理卡片 -->
    <el-card class="box-card" shadow="hover">
      <div slot="header" class="clearfix">
        <span class="header-title">系统公告和管理员通知</span>
      </div>
      <!-- 公告列表表格 -->
      <el-table :data="announcementList" ref="announcementTable" @selection-change="handleAnnouncementSelectionChange" style="width: 100%; height: calc(100vh - 120px); overflow: auto;">
        <el-table-column type="index" label="序号"></el-table-column>
        <el-table-column prop="title" label="标题"></el-table-column>
        <el-table-column prop="content" label="内容"></el-table-column>
        <el-table-column prop="posted_at" label="发布日期">
          <template slot-scope="{ row }">
            {{ formatDate(row.posted_at) }}
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button @click="viewAnnouncement(scope.row)" type="primary" size="small">查看详情</el-button>
            <el-button @click="markAnnouncementAsRead(scope.row)" type="success" size="small" :disabled="scope.row.read_status === 'read'">标记已读</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-card>

    <!-- 通知管理卡片 -->
    <el-card class="box-card" shadow="hover" style="margin-top: 20px;">
      <div slot="header" class="clearfix">
        <span class="header-title">用户通知</span>
      </div>
      <!-- 通知列表表格 -->
      <el-table :data="notificationList" ref="notificationTable" @selection-change="handleNotificationSelectionChange" style="width: 100%; height: calc(100vh - 120px); overflow: auto;">
        <el-table-column type="index" label="序号"></el-table-column>
        <el-table-column prop="title" label="标题"></el-table-column>
        <el-table-column prop="message" label="内容"></el-table-column>
        <el-table-column prop="created_at" label="创建日期">
          <template slot-scope="{ row }">
            {{ formatDate(row.created_at) }}
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button @click="viewNotification(scope.row)" type="primary" size="small">查看详情</el-button>
            <el-button @click="markNotificationAsRead(scope.row)" type="success" size="small" :disabled="scope.row.read_status === 'read'">标记已读</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-card>
  </div>
</template>

<script>
export default {
  data() {
    return {
      announcementList: [], // 存储公告列表数据
      notificationList: [], // 存储通知列表数据
      selectedAnnouncements: [], // 存储选中的公告
      selectedNotifications: [] // 存储选中的通知
    };
  },

  methods: {
    // 获取系统公告列表
    fetchAnnouncementList() {
      // 模拟从后端获取数据的过程，实际项目中需替换为实际接口调用
      this.announcementList = [
        {
          announcement_id: 1,
          title: '系统维护公告',
          content: '系统将于本周末进行维护，请提前做好准备。',
          posted_at: '2024-06-12 00:00:00',
          read_status: 'unread'
        },
        {
          announcement_id: 2,
          title: '招聘会公告',
          content: '公司将在下周举办线上招聘会，欢迎大家参加。',
          posted_at: '2024-06-06 00:00:00',
          read_status: 'read'
        }
        // 在实际项目中，这里会是从后端获取的数据
      ];
    },

    // 获取用户通知列表
    fetchNotificationList() {
      // 模拟从后端获取数据的过程，实际项目中需替换为实际接口调用
      this.notificationList = [
        {
          notification_id: 1,
          title: '新消息通知',
          message: '您有一条新的系统消息。',
          created_at: '2024-06-13 10:00:00',
          read_status: 'unread'
        },
        {
          notification_id: 2,
          title: '重要通知',
          message: '请及时更新个人信息。',
          created_at: '2024-06-12 12:00:00',
          read_status: 'read'
        }
        // 在实际项目中，这里会是从后端获取的数据
      ];
    },

    // 查看公告详情
    viewAnnouncement(row) {
      // 在实际项目中，您可以实现弹窗或者页面跳转等操作来展示公告详情
      this.$message({
        message: `查看公告：${row.title}`,
        type: 'info'
      });
    },

    // 标记公告为已读
    markAnnouncementAsRead(row) {
      // 在实际项目中，发送请求将公告标记为已读
      row.read_status = 'read'; // 模拟前端修改状态
      this.$message({
        message: `标记已读：${row.title}`,
        type: 'success'
      });
    },

    // 查看通知详情
    viewNotification(row) {
      // 在实际项目中，您可以实现弹窗或者页面跳转等操作来展示通知详情
      this.$message({
        message: `查看通知：${row.title}`,
        type: 'info'
      });
    },

    // 标记通知为已读
    markNotificationAsRead(row) {
      // 在实际项目中，发送请求将通知标记为已读
      row.read_status = 'read'; // 模拟前端修改状态
      this.$message({
        message: `标记已读：${row.title}`,
        type: 'success'
      });
    },

    // 处理选中的公告变化
    handleAnnouncementSelectionChange(selection) {
      this.selectedAnnouncements = selection;
    },

    // 处理选中的通知变化
    handleNotificationSelectionChange(selection) {
      this.selectedNotifications = selection;
    },

    // 格式化日期
    formatDate(date) {
      return new Date(date).toLocaleDateString('en-US', {
        year: 'numeric',
        month: '2-digit',
        day: '2-digit'
      });
    }
  },

  mounted() {
    // 组件挂载时获取系统公告和管理员通知列表数据
    this.fetchAnnouncementList();
    this.fetchNotificationList();
  }
};
</script>

<style>
.announcement-management {
  width: 100%;
  height: 100%;
  padding: 10px;
  box-sizing: border-box;
}

.announcement-management .box-card {
  width: 100%;
  height: 100%;
}

.announcement-management .el-card__body {
  height: calc(100vh - 60px); /* Adjust height to fill the screen */
  overflow: auto;
}

.announcement-management .header-title {
  font-size: 18px;
  font-weight: bold;
}
</style>
